<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link th:href="@{/bootstrap/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" media="screen"/>
    <title>门店检测统计</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('报表管理','门店检测统计')"></div>
</div>

<div th:fragment="content" th:remove="tag">


    <div class="row">
        <div class="col-xs-12">

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">门店差错订单数</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form id="queryForm" th:action="@{flow}" method="post">
                    <div class="box-body">
                        <div class="row">

                            <div class="col-xs-3">
                                <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                    <input  th:name="month2" class="form-control input-sm" type="text" th:value="${month2}" readonly="readonly" placeholder="开始时间" />
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                            </div>
                            <div class="col-xs-3">
                                <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                    <input  th:name="month1" class="form-control input-sm" type="text" th:value="${month1}" readonly="readonly" placeholder="结束时间" />
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                            </div>


                            <input type="hidden" th:name="userId" th:value="${session.authUser.userId}"/>
                            <shiro:hasRole name="sys_supervisor">
                                <input type="hidden" th:name="supervisorId" th:value="${session.supervisorId}"/>
                            </shiro:hasRole>
                            <shiro:hasRole name="sys_agency">
                                <input type="hidden" th:name="agencyId" th:value="${session.agencyId}"/>
                            </shiro:hasRole>
                            <shiro:hasRole name="sys_bd">
                                <input type="hidden" th:name="cityAgencyId" th:value="${session.cityAgencyId}"/>
                            </shiro:hasRole>
                            <shiro:hasRole name="sys_ka">
                                <input type="hidden" th:name="kaId" th:value="${session.kaId}"/>
                            </shiro:hasRole>                            <div class="col-xs-3">
                                <button id="btn-query" type="button" class="btn btn-primary pull-right btn-sm">查询</button>
                            </div>

                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">

                    </div>
                </form>



                <div class="box-header with-border">
                    <button id="btn-query2" type="button" class="btn btn-primary  btn-sm">按照检测量排序</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button id="btn-query3" type="button" class="btn btn-primary  btn-sm">按照回收量排序</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button id="btn-query4" type="button" class="btn btn-primary  btn-sm">按照回收金额排序排序</button>
                </div>



                <div id="main" class="box-body" style="height:400px;"/>

                <div class="box">
                    <div class="box-body">
                        <table id="dataTable" class="table table-striped table-bordered table-hover table-condensed" >

                            <thead>
                            <tr>
                                <th>门店名称</th>
                                <th>门店负责人</th>
                                <th>所属客户</th>
                                <th>检测量</th>
                                <th>检测量（台）</th>
                                <th>回收量</th>
                                <th>差错数</th>
                                <th>总金额</th>
                                <th>差错率</th>
                                <th>回收率</th>
                                <th>操作</th>

                            </tr>
                            </thead>


                        </table>

                    </div>
                </div>








            </div>



            <!-- /.box -->
        </div>

    </div>

    <script th:src="@{/charts/echarts.js}"></script>
    <script th:src="@{/charts/shine.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap-datetimepicker.js}" charset="UTF-8"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js}" charset="UTF-8"></script>
    <script>

        $('.form_date').datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            startView: 'month',
            minView:'month',
            maxView:'decade',
            language:  'zh-CN',
            startDate:'2017-07-27',
            endDate:new Date()
        });



        $(function () {

         var tables = $("#dataTable").dataTable({
            serverSide: true,//分页，取数据等等的都放到服务端去
            processing: true,//载入数据的时候是否显示“载入中”
            pageLength: 10,  //首次加载的数据条数
            ordering: false,//排序操作在服务端进行，所以可以关了。
            pagingType: "full_numbers",
            autoWidth: false,
            stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
            searching: false,
            //   scrollX:true,
            //    scrollY:"500px",
            ajax: {   //类似jquery的ajax参数，基本都可以用。
                type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                url: "store/index",
                dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                    var param = {}; //因为服务端排序，可以新建一个参数对象
                    param.draw = d.draw;
                    param.start = d.start;
                    param.length = d.length;
                    var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                    formData.forEach(function (e) {
                        param[e.name] = e.value;
                    });
                    return param;//自定义需要传递的参数。
                }
            },
            columns: [//对应上面thead里面的序列


            {"data": 'storeName', defaultContent: ""},
                {"data": 'contactName', defaultContent: ""}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                {"data": 'kaName', defaultContent: ""},
                {"data": 'checkSum', defaultContent: ""},
                {"data": 'realSum', defaultContent: ""},
                {"data": 'recyleSum', defaultContent: ""},
                {"data": 'errorSum', defaultContent: ""},
                {"data": 'totalAmount', defaultContent: ""},
                {"data": 'errorRateStr', defaultContent: ""},
                {"data": 'recyleRateStr', defaultContent: ""},
                {"data": null, "width": "80px"}

            ],

             /*<![CDATA[*/
             columnDefs: [
                 {
                     targets: -1,//编辑
                     data: null,//下面这行，添加了编辑按钮和，删除按钮
                     defaultContent: "<div class='btn-group'><button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>详情</button>"
                 }
             ],
             dom: '<"toolbar">frtip',
             /*]]>*/

            language: {
                lengthMenu: "",//不显示记录条数选择
                //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                processing: "加载中",//处理页面数据的时候的显示
                /*<![CDATA[*/
                paginate: {//分页的样式文本内容。
                    previous: "<",
                    next: ">",
                    first: "<<",
                    last: ">>"
                },
                /*]]>*/
                zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                //下面三者构成了总体的左下角的内容。
                //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                sSearch: "关键字："
            }

        });

            $("#dataTable tbody").on("click", "#editRow", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                var month1 = $('input[name="month1"]').val();
                var month2 = $('input[name="month2"]').val();
                location.href="/rp/storeEro/"+data.storeId+"/"+month1 +"/"+month2;
            });

         $("div.toolbar").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>');


            //查询按钮
            $("#btn-query").on("click", function () {
                $('#dataTable').DataTable().ajax.reload();
            });


            //导出按钮
            $("#btn-down").on("click", function () {
                /*<![CDATA[*/
                $("div.toolbar button").hide();
                $("div.toolbar").append("<div class='progress active' style='width: 500px;height: 25px;'><div class='progress-bar progress-bar-primary progress-bar-striped' id='progress-bar'" +
                    " role='progressbar' aria-valuenow='10' aria-valuemin='0' aria-valuemax='100' style='width: 10%'>导出中...</div></div>")
                /*]]>*/
                var form = $("#queryForm");
                form.attr('target','');
                form.attr('method','post');
                form.attr('action','/rp/storeEro/downloadExcel');
                form.submit();
                var timer =  setInterval(function () {
                    $.ajax({
                        url: '/rp/storeEro/isExportOrder',
                        type: 'POST',
                        dataType: "json",
                        cache: "false",
                        success: function (result) {
                            if (result.result == 200) {
                                /*<![CDATA[*/
                                var now = parseInt($("#progress-bar").attr("aria-valuenow")) +20;
                                if(now < 121){
                                    $("#progress-bar").attr("aria-valuenow",now);
                                    $("#progress-bar").attr("style","width:"+now+"%");
                                }
                                /*]]>*/
                            }else{
                                /*<![CDATA[*/
                                $("div.toolbar button").show();
                                $("div.toolbar div ").remove();
                                /*]]>*/
                                clearInterval(timer);
                            }
                        }
                    })
                },"2000");
            });


            $(function () {

                // 异步加载数据
                getdata(0);

            });


            $('#btn-query').on("click", function () {
                getdata(0);
            });

            $('#btn-query2').on("click", function () {
                getdata(0);
            });

            $('#btn-query3').on("click", function () {
                getdata(1);
            });

            $('#btn-query4').on("click", function () {
                getdata(2);
            });




            function getdata(x){
                var chart = echarts.init(document.getElementById('main'), 'shine');
                chart.showLoading();
                var querydata = $("#queryForm").serialize();

                /*<![CDATA[*/
                var queryData = querydata + "&order=" + x;
                /*]]>*/
                $.post( 'eroFlow',
                    queryData,
                    function (datas) {


                         var data = $.parseJSON(datas);
                        var recyleSums = [];
                        var totalAmounts = [];
                        var realSums = [];
                        var storeName = [];
                         $.each(data, function (index, obj) {
                             recyleSums.push(obj.recyleSum);
                             totalAmounts.push(obj.totalAmount);
                             realSums.push(obj.realSum);
                             storeName.push(obj.storeName)
                        });

                        option = {
                            color: ['#3398DB'],
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            legend: {
                                data:['检测量','回收量','回收金额']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    data : storeName,
                                    axisTick: {
                                        alignWithLabel: true
                                    },
                                    axisLabel :{
                                        interval:0
                                    }
                                }
                            ],
                            yAxis : [
                                {
                                    type: 'value',
                                    name: '检测／回收',
                                    position: 'left',
                                    axisLabel: {
                                        formatter: '{value} （台）'
                                    }
                                },
                                {
                                    type: 'value',
                                    name: '金额',
                                    position: 'right',
                                    axisLabel: {
                                        formatter: '{value} （元）'
                                    }
                                },
                            ],
                            series : [
                                {
                                    name:'检测量',
                                    type:'bar',
                                    itemStyle:{normal:{color:'#d14a61'}},
                                    data:realSums
                                },
                                {
                                    name:'回收量',
                                    type:'bar',
                                    itemStyle:{normal:{color:'#FF00FF'}},
                                    data:recyleSums
                                },
                                {
                                    name:'回收金额',
                                    type:'bar',
                                    yAxisIndex: 1,
                                    itemStyle:{normal:{color:'#87CEEB'}},
                                    data:totalAmounts
                                },

                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        chart.setOption(option);



                    });


                chart.hideLoading();
                window.onresize = chart.resize;


            }


        })





    </script>


</div>


</body>
</html>